@use "../../default" as theme;
@use "../../ResizeObserver/style/default" as ResizeObserver;
@use "../../Floating/style/default" as Floating;
@use "../../Icon/style/default" as Icon;
@use "../../ScrollArea/style/default" as ScrollArea;
@use "../../VirtualScroll/style/default" as VirtualScroll;
.pf-Select{
	@include theme.input-widget-wrap(
		$-height:theme.$Select-height,
		$-active-color:theme.$Select-primary-color,
		$-border-color:theme.$Select-border-color,
		$-disabled-color:theme.$Select-disabled-color,
		$-disabled-opacity:theme.$Select-disabled-opacity,
		$-radius:theme.$Select-radius,
		$-round-padding:theme.$Select-round-padding,
		$-transition:theme.$Select-transition,
		$-shadow:theme.$Select-shadow,
		$-real:pf-Select_inputWrap,
		$-vertical-align:theme.$vertical-align,
		$-shadow-class:pf--opened,
	);
	&.pf--multiple{
		height:auto;
		min-height: theme.$Select-height;
	}
	&.pf--focus{
		border-color: theme.$Select-primary-color;
	}
	cursor:pointer;
}
.pf-Select_wrap{
	display:inline-block;
	vertical-align: theme.$vertical-align;
}
@include theme.input-widget(
	$-prefix:pf-Select,
	$-font-size:theme.$Select-content-size,
	$-padding:0 theme.$Select-gap,
	$-color:theme.$Select-color,
	$-hint-color:theme.$Select-hint-color,
	$-disabled-opacity:theme.$Select-disabled-opacity,
);
.pf-Select_input{
	cursor:pointer;
}
.pf-Icon{
	&.pf-Select_clear,&.pf-Select_arrow,&.pf-Select_icon{
		flex-shrink:0;
		font-size: theme.$Select-icon-size;
		color: theme.$Select-icon-color;
	}
	&.pf-Select_icon{
		&.pf--prefix{
			margin-left: theme.$Select-gap;
		}
	}
	&.pf-Select_clear,&.pf-Select_arrow{
		margin-right: theme.$Select-gap;
	}
	&.pf-Select_arrow{
		transition: theme.$Select-transition;
		transition-property:transform;
		.pf-Select.pf--opened &{
			transform:rotate(180deg);
		}
	}
}
.pf-Select_options{
	@include theme.popup-menu(
		$-radius: theme.$Select-popup-radius,
		$-background: theme.$Select-popup-bg-color,
		$-color: theme.$Select-popup-color,
		$-font-size: theme.$Select-popup-content-size,
		$-box-shadow: theme.$Select-popup-shadow,
	);
}
.pf-Select_content{
}
.pf-Select_nodata{
	color: theme.$Select-hint-color;
	user-select:none;
}
.pf-Select_nodataText{
	min-width:120px;
	padding:15px;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
.pf-Select_optionItem{
	height: theme.$Select-item-height;
	line-height: theme.$Select-item-height;
	padding: theme.$Select-item-padding;
	white-space:nowrap;
	transition: theme.$Select-transition;
	transition-property:background-color,color;
	cursor:pointer;
	user-select:none;
	&:not(.pf--active):hover{
		background: theme.$Select-hover-color;
	}
	&.pf--active{
		color: theme.$Select-active-color;
		background: theme.$Select-active-bg-color;
	}
	&.pf--disabled{
		opacity: theme.$Select-disabled-opacity;
		cursor:not-allowed;
	}
}
.pf-Select_tagContainer{
	position:relative;
	width:100%;
	min-height: theme.$Select-content-height;
	display:flex;;
	flex-wrap:wrap;
	align-items:center;
	padding: theme.$Select-tag-gap;
	font-size: theme.$Select-tag-content-size;
	color: theme.$Select-tag-color;
	overflow:hidden;
}
.pf-Select_multipleInput{
	margin:0 #{theme.$Select-gap - theme.$Select-tag-gap};
	height: theme.$Select-content-height - 2 * theme.$Select-tag-gap;
	font-size: theme.$Select-content-size;
	color: theme.$Select-color;
	@include theme.native-input-normal;
}
.pf-Select_multipleInputMeasure{
	position:absolute;
	top:0;
	padding:2px;
	z-index: theme.$Select-index;
	visibility:hidden;
	pointer-events:none;
	font-size: theme.$Select-content-size;
	white-space:nowrap;
}
.pf-Select_hint{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	line-height: theme.$Select-content-height;
	padding:0 theme.$Select-gap;
	font-size: theme.$Select-content-size;
	color: theme.$Select-hint-color;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	user-select:none;
	.pf-Select.pf--disabled &{
		display:none;
	}
}
.pf-Select_tag{
	white-space:nowrap;
	background: theme.$Select-tag-bg-color;
	padding: theme.$Select-tag-padding;
	margin: theme.$Select-tag-gap;
	height: theme.$Select-tag-height;
	display:inline-flex;
	align-items:center;
	border:1px solid theme.$Select-border-color;
	border-radius: theme.$Select-tag-radius;
	user-select:none;
	.pf-Select.pf--disabled &{
		border-color: theme.$Select-tag-disabled-border-color;
		background: theme.$Select-tag-disabled-bg-color;
		opacity: theme.$Select-disabled-opacity;
	}
}
.pf-Select_tagDelete{
	font-size: theme.$Select-tag-content-size;
	margin-left: theme.$Select-gap;
	color: theme.$Select-tag-delete-color;
}